<template>
  <div>
    <base-page ref="basePage" :basepage="basePage">
      <div slot="insertAndEdit">
        <el-button type="info" @click="addRecord">增加</el-button>
        <el-button type="info" @click="delRecord">删除</el-button>
        <div style="margin: 20px;" v-for="(record,index) in records" :key="index">
          <el-col :span="6">
            <el-select v-model="record.bookId">
              <el-option
                v-for="each in books"
                :key="each.value"
                :label="each.bookName"
                :value="each.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input v-model="record.num" placeholder="数量" @input="change(record)"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="record.price" placeholder="单价" @input="change(record)"></el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="record.total" placeholder="总价"></el-input>
          </el-col>
        </div>
      </div>
      <div slot="table">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              ref="table"
              :data="props.row.records"
              border
              :header-cell-style="{ textAlign: 'center' }"
              style="width: 100%"
              :row-style="{ height: '5' }"
              :cell-style="{ padding: '8px 0' }"
              highlight-current-row
              @current-change="handleCurrentChange"
            >
              <el-table-column prop="bookName" label="书籍名称" align="center"></el-table-column>
              <el-table-column prop="num" label="数量" align="center"></el-table-column>
              <el-table-column prop="price" label="单价" align="center"></el-table-column>
            </el-table>
          </template>
        </el-table-column>
      </div>
    </base-page>
  </div>
</template>
<script>
import BasePage from "../BasePage.vue";
export default {
  components: {
    "base-page": BasePage,
  },
  data() {
    return {
      basePage: {
        // URL
        url: "purchaseOperation",
        // 查询条件
        searchConf: [[]],
        buttonConf: {
          insertShow: true,
          deleteShow: true,
        },
        // table列
        tableColumnConf: {
          columns: [
            { prop: "createName", label: "创建人" },
            { prop: "createTime", label: "创建时间" },
            { prop: "totalCost", label: "总金额" },
            { prop: "available", label: "是否有效" },
          ],
          operation: {
            state: true,
            defs: [],
          },
        },
        detailConf: {
          title: "进货记录",
          data: [],
        },
        // 新增修改form表单设置
        formConf: {
          formData: {
            title: "进货记录",
          },
          width: "50%",
          title: "",
          data: [],
          rules: {},
        },
        books: [],
      },
      records: [],
    };
  },
  methods: {
    addRecord() {
      this.records.push({});
    },
    delRecord() {
      this.records.splice(this.records.length - 1, 1);
    },
    event(event) {
      switch (event) {
        case "insert-before": {
          this.basePage.formConf.formData.records = this.records;
        }
      }
    },
    selectChange(type, pro, value) {},
    formatter(data, prop, index) {
      switch (prop) {
        case "available": {
          if (data == "1") {
            return "有效";
          } else {
            return "无效";
          }
        }
        default: {
          return data;
        }
      }
    },
    change(record) {
      if (record.num != undefined && record.price != undefined) {
        record.total = record.num * record.price + "";
      }
    },
    getBooks() {
      this.COMMON.httpPost(
        this,
        "bookOperation/selectList",
        { available: "1", del: "0" },
        (result) => {
          if (result.result === "SUCCESS") {
            this.books = result.list;
          }
        },
        (result) => {}
      );
    },
  },
  activated: function () {
    this.getBooks();
  },
};
</script>
<style>
</style>